<template>
	<div class="content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">用户管理</h2>
	    </div>
	    <div class="cloud-body">
			<Screen :list="search_config" :data="search_data"  @submit="onSearch"></Screen>
	    </div>
	    <div class="cloud-body">
	    	<div class="r-table">
		    	<div class="r-table-head">
		    		<div class="r-table-title"><i class="iconfont icon-menu1"></i>用户列表</div>
		    	</div>
		    	
			    <Table :datas="datas" class="r-table-main" @select="onselect" :checkbox="checkbox" :stripe="stripe" :loading="loading" selectWhenClickTr>
			      <TableItem title="" prop="$serial" v-if="serial"></TableItem>
			      <TableItem title="用户id" prop="userid"></TableItem>
			      <TableItem title="微信昵称" prop="nickname"></TableItem>
			      <TableItem align="center" title="会员手机" prop="molibe"></TableItem>
			      <TableItem align="center" title="消费金额" prop="money"></TableItem>
			      <TableItem title="订单数量" prop="order_num"></TableItem>
			      <TableItem title="会员等级" prop="user_level"></TableItem>
			      <TableItem title="上次消费时间" prop="last_time"></TableItem>
			      <TableItem title="禁用账户" align="center">
			      	<template slot-scope="{data}">
			      		<h-switch v-model="data.status" :small="true"></h-switch>
			      	</template>
			      </TableItem>
			      <TableItem title="操作" align="center" :width="160">
			      		<template slot-scope="{data}">
			      			<div class="r-item-action">
				      			<div @click="intEdit(datas, data)" class="r-action-button">编辑</div>
				      			<div @click="intRemove(datas, data)" class="r-action-button">删除</div>
			      			</div>
			      		</template>
			      </TableItem>
			      <div slot="empty">暂时无数据</div>
			    </Table>
			    <div class="r-table-footer">
			    	<div><Checkbox v-model="batch_val"></Checkbox><button class="h-btn h-btn-no-border h-btn-text-blue">批量删除</button></div>
			    	<div><Pagination v-model="pagination" @change="currentChange" :small="true" layout="total,sizes,pager,jumper"></Pagination></div>
			    </div>
			</div>
	    </div>
	</div>
</template>
<script type="text/javascript">
	//搜索组件
	import Screen from '@/components/screen'
	export default {

		name:"",
		data(){
			return {
				batch_val:false,

	            /**
	             * 搜索数据
	             * @type {[type]}
	             */
	            search_config: [
	                {
	                    type: 'input',
	                    label: '输入搜索',
	                    name: 'title',
	                    placeholder: ''
	                },
	                {
                        type:'date',
                        min_name:'startDate',
                        max_name:'endDate',
                        label:'上次消费时间',
                        format:'YYYY-MM-DD',
                        model:'range',               			//模式
                    }
	            ],
	            search_data: {
	                title: '',
	                startDate:'',
	                endDate:'',
	            },

	            // 表格
				  show: false,
			      border: false,
			      stripe: false,
			      checkbox: true,
			      serial: false,
			      loading: false,
			      datas: [
			        { userid:'001',nickname:'xxx',molibe:13858497812,money:'100.00',order_num:10,user_level:1,last_time:'2020-10-10',status:false},
			        { userid:'002',nickname:'www',molibe:13858497812,money:'200.00',order_num:20,user_level:2,last_time:'2020-02-02',status:true},
			        { userid:'003',nickname:'iii',molibe:13858497812,money:'300.00',order_num:30,user_level:3,last_time:'2020-03-03',status:false},
			        { userid:'004',nickname:'vvv',molibe:13858497812,money:'400.00',order_num:40,user_level:4,last_time:'2020-04-04',status:true}
			      ],

			      // 分页
			      pagination: {
			        page: 1,
			        size: 10,
			        total: 100
			      }
			}
		},
	    components: {
	       Screen
	    },

		methods:{
			onSearch(data){
				console.log('搜索数据',data);
			},

		    onselect(data) {
		      log('onselect', data);
		    },

		   	intEdit(datas,data){
		   		console.log('编辑',data);
		   	},

	    	intRemove(datas, data) {
	    		console.log('加入回收站',data)
	          // datas.splice(datas.indexOf(data), 1);
	        },


		    currentChange(value) {
		      console.log(value);
		    }
		}
	}
</script>
<style type="text/css" lang="less">
	.cloud-header{
		margin-bottom: 20px;
	}
	.r-title-h2{
		border-left: solid 5px #2d7bf4;
		padding-left: 10px;
		margin-bottom: 0px !important;
	}
	.r-table{
		.r-table-head{
			border-bottom: solid 1px #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20px;
			.r-table-title{
				color: #999;
				i{
					margin-right: 10px;
				}
			}
			.r-table-button{
				button{
					margin-left: 15px;
				}
				i{
					margin-right: 5px;
				}
			}
		}
		.r-table-main{
			border: none;
			th{
				background-color: #fff;	
			}
		}
		.r-item-action{
			display: flex; 
			align-items: center; 
			justify-content: center;
			.r-action-button{
				margin: 0px 5px;
				color: #3788ee;
				cursor: pointer;
			}
			.r-action-button:active{
				color: #2677dd;
			}
		}
		.r-table-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-items: center;
			padding-top: 20px;
			margin-top: 20px;
			border-top: 1px solid #eeeeee;
		}
	}

</style>
